<template>
    <div class="navBarContainer">
        <div class="barItem" :class="index == activeNum ? 'active' : ''" v-for="(item, index) in navBarItem"
            :key="index" @click="clickBarItem(item.path, index)">{{ item.name }}</div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';


const route = useRoute();
const router = useRouter();

const activeNum = ref(0);

const props = defineProps({
    navBarItem: {
        type: Array,
        default: () => [],
    },
});

onMounted(() => {
    // 根据地址判断 activeNum
    props.navBarItem.forEach((item, index) => {
        if (decodeURI(route.path).search(item.path) !== -1) {
            activeNum.value = index;
        }
    });
});

const emit = defineEmits(["clickBarItem"]);

const clickBarItem = (path, index) => {
    if (activeNum.value === index) {
        return;
    }
    // console.log(path);
    activeNum.value = index;
    emit("clickBarItem", path);
};

</script>

<style scoped>
.navBarContainer {
    height: 64px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    box-sizing: border-box;
}

.barItem {
    height: 64px;
    padding-bottom: 18px;
    padding-top: 26px;
    margin-left: 40px;
    font-size: 16px;
    color: #505050;
    height: 100%;
    cursor: pointer;
}

.active {
    color: var(--brand_pink);
    font-weight: 600;
    border-bottom: 3px solid var(--brand_pink);
}
</style>